<template>

  <div class="main">
    <MainTopMenuPanel :activePanel="activePanel" ></MainTopMenuPanel>

    <div class="main-map" >
      <User></User>
      <baidu-map ref="bdmap01"
                 :center="bdmap.center"
                 class="baidumap"
                 ak="IfkNE0XDdoaTwdGGkOWrALDkFZOTI9b8"
                 :zoom="bdmap.zoom"
                 :scroll-wheel-zoom="true"
                 @ready="mapReady">
        <!--  刻度尺  -->
        <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
        <!-- 缩放导航条 -->
        <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
        <!--  点 -->
        <bm-marker :position="bdmap.marker.point" :dragging="true" animation="BMAP_ANIMATION_BOUNCE"> </bm-marker>
        <!-- 弹窗 -->
        <bm-info-window :position="bdmap.marker.infoWindow.point"
                       :show="bdmap.marker.infoWindow.show"
                        @close="infoWindowClose"
                        @open="infoWindowOpen">
          <div v-if="online" class="play-windows"><JsPlayer ref="jsPLayer1"></JsPlayer></div>
          <div v-if="!online">
            <ul style='padding-top:10px;'>
              <li>设备名：{{bdmap.marker.infoWindow.deviceData.deviceName}}</li>
              <li>设备号：{{bdmap.marker.infoWindow.deviceData.deviceId}}</li>
              <li>通道号：{{bdmap.marker.infoWindow.deviceData.channel}}</li>
              <li>在线状态：{{bdmap.marker.infoWindow.deviceData.online}}</li>
              <li>经度：{{bdmap.marker.infoWindow.deviceData.lng}}</li>
              <li>纬度:{{bdmap.marker.infoWindow.deviceData.lat}}</li>
            </ul>
          </div>
        </bm-info-window>
      </baidu-map>
    </div>
<!--
         &lt;!&ndash; 弹窗 &ndash;&gt;
        &lt;!&ndash;                              :title="bdmap.marker.infoWindow.title"&ndash;&gt;
        <bm-info-window :position="bdmap.marker.infoWindow.point"

                        :show="bdmap.marker.infoWindow.show"
                        @close="infoWindowClose"
                        @open="infoWindowOpen"
        >
          <div v-if="online" class="play-windows"><JsPlayer ref="jsPLayer1"></JsPlayer></div>
          <div v-if="!online">
            <ul style='padding-top:10px;'>
              <li>设备名：{{bdmap.marker.infoWindow.deviceData.deviceName}}</li>
              <li>设备号：{{bdmap.marker.infoWindow.deviceData.deviceId}}</li>
              <li>通道号：{{bdmap.marker.infoWindow.deviceData.channel}}</li>
              <li>在线状态：{{bdmap.marker.infoWindow.deviceData.online}}</li>
              <li>经度：{{bdmap.marker.infoWindow.deviceData.lng}}</li>
              <li>纬度:{{bdmap.marker.infoWindow.deviceData.lat}}</li>
              <li><button>布防/撤防</button></li>
              <li><button>看守位开启/关闭</button></li>
              <li><button>看守位/关闭</button></li>
              <li><button>录像开始/结束</button></li>
              <li><button>报警复位</button></li>
              <li><button>远程启动</button></li>
            </ul>
            <p v-text="bdmap.marker.infoWindow.contents"></p>
            <button @click="clear">Clear</button>
          </div>
        </bm-info-window>

      </baidu-map>
    </div>
-->


<!--    <SideButton :display.sync="drawerBottom.display" :boxHeight="drawerBottom.drawerHeight" :boxWidth="drawerBottom.drawerWidth" ></SideButton>-->
    <!-- 底 -->
    <MainFooterMenu></MainFooterMenu>

    <!-- 左边 弹窗-->
    <DrawerLeftButton @click="drawerLeftBtnClick"
                      :display="drawerLeftBtnDisplay"
                      :boxHeight="drawerLeft.drawerHeight"
                      :boxWidth="drawerLeft.drawerWidth" >
    </DrawerLeftButton>

    <DrawerLeft title="设备通道列表"
                :display="drawerLeftDisplay"
                :width="drawerLeft.drawerWidth"
                :height="drawerLeft.drawerHeight"
                :inner="drawerLeft.inner"
                :mask="drawerLeft.mask"
                @close="drawerLeftClick">

      <GbDevicetree ref="gbDeviceTree"
                    @on-org-node-click="orgClick"
                    @on-dev-node-click="devClick"
                    @on-online-click="chnOnlineClick"
                    @on-offline-click="chnOfflineClick"
                    @on-playbtnclick="playBtnClick"
                    @on-select-change="selectChange"/>

<!--        <DeviceTree ref="deviceTree" @on-playbtnclick="devicePlayClick" @on-select-change="deviceChange" @on-node-click="nodeChange">
        </DeviceTree>-->

<!--        <GbDevicetree ref="gbDeviceTree"
                      @on-playbtnclick="devicePlayClick"
                      @on-select-change="deviceChange"/>-->

<!--      <TreeTest ref="treeTest"
                @on-playbtnclick="devicePlayClick"
                @on-select-change="deviceChange"/>-->
    </DrawerLeft>

    <!-- 右边 -->
    <DrawerRightButton @click="drawerRightBtnClick"
                       :display="drawerRightBtnDisplay"
                       :boxHeight="drawerRight.drawerHeight"
                       :boxWidth="drawerRight.drawerWidth" ></DrawerRightButton>
    <DrawerRight title="云台控制"
                 :display="drawerRightDisplay"
                 :width="drawerRight.drawerWidth"
                 :height="drawerRight.drawerHeight"
                 :inner="drawerRight.inner"
                 :mask="drawerRight.mask"
                 @close="drawerRightClick">
    </DrawerRight>
  </div>
</template>
<script>
import SideButton from "@/view/Home/component/SideButton";
import DrawerLeftButton from "@/view/Home/component/DrawerLeftButton";
import DrawerLeft from "@/view/Home/component/DrawerLeft";
//import DeviceTree from "_c/topnav/DeviceTree";
//import TreeTest from "_c/topnav/TreeTest";
import GbDevicetree from "_c/topnav/GbDeviceTree";
import DrawerRight from "@/view/Home/component/DrawerRight";
import DrawerRightButton from "@/view/Home/component/DrawerRightButton";
import MainTopMenuPanel from "@/view/Home/component/MainTopMenuPanel";
import MainFooterMenu from "@/view/Home/component/MainFooterMenu";
import JsPlayer from "@/view/Home/component/JsPlayer";
import User from "_c/main/components/user";
import Device from "@/api/Device";
import {apiResult} from "@/libs/util";
export default {
  components: {GbDevicetree,SideButton,DrawerLeftButton,DrawerLeft,DrawerRight,DrawerRightButton,JsPlayer,User,MainTopMenuPanel,MainFooterMenu },
  data(){
    return{
      activePanel:1,
      api: new Device(),
      drawerBottom:{
        inner:false,
        display: false,
        drawerWidth: '30%',
        drawerHeight: '200px',
        mask: false,

      },
      btnBottom:'200px',

      drawerLeft:{
        drawerHeight:'60%',
        drawerWidth:'300px',
        inner:false,
        display: false,
        mask: false,
      },
      btnLeft:'200px',

      drawerRight:{
        drawerHeight:'60%',
        drawerWidth:'200px',
        inner:false,
        display: false,
        mask: false,
      },


      mapInfo: {
        centerLongitude:114.236262,
        centerLatitude:22.677236,
        minZoom:2,
        maxZoom:20,
        defaultZomm:10,
        mode: 'ONLINE'
      },
      online:false,
      bdmap:{
        center: {lng: 114.236262, lat: 22.677236},
        zoom: 15,
        /** 标注点 */
        marker:{
          point:{lng:114.236262,lat:22.677236},
          //content:"我是我",
          label:{
            content:"我在这",
          },
          infoWindow:{
            point:{lng:114.236262,lat:22.677236},
            show: true,
            title:null,
            contents: '',
            deviceData:{
              deviceName:null,
              deviceId:null,
              channel:null,
              online:"在线",
              lng:114.236262,
              lat:22.677236,
            }
          },
        }
      }
    }
  },
  computed:{
    drawerLeftDisplay(){
      return this.drawerLeft.display;
    },
    drawerLeftBtnDisplay(){
      return this.drawerLeft.display;
    },

    drawerRightDisplay(){
      return this.drawerRight.display;
    },
    drawerRightBtnDisplay(){
      return this.drawerRight.display;
    }
  },
  methods:{
    /** 地图加载完后 */
    mapReady ({BMap, map}) {
      this.bdmap.center.lng = this.mapInfo.centerLongitude;
      this.bdmap.center.lat = this.mapInfo.centerLatitude;
      this.bdmap.zoom = this.mapInfo.defaultZomm;
      console.log("%o",this.$refs.bdmap01.getCenterPoint());
    },
    drawerLeftBtnClick(show){
      /** 左边抽屉按钮点击 */
      this.drawerLeft.display = show;
    },
    drawerLeftClick(){
      /* 点击关闭按钮 */
      this.drawerLeft.display=false;
    },

    drawerRightBtnClick(show){
      /** 右边抽屉按钮点击 */
      this.drawerRight.display = show;
    },
    drawerRightClick(){
      /* 点击关闭按钮 */
      this.drawerRight.display=false;
    },
    devicePlayClick(node,data){
      this.deviceChange(node,data);
    },

    nodeChange(node,data){
      this.deviceChange(node,data);
    },

    /** 设备点击 */
    deviceChange(node,data){
      //console.log(data);
      //console.log(node);
      this.bdmap.marker.infoWindow.deviceData.deviceId = data.title;
      let online="离线";
      this.online=false;
      if ("1"==data.online){
        online="在线";
        this.online=true;
      }
      this.bdmap.marker.infoWindow.deviceData.deviceName = data.title;
      this.bdmap.marker.infoWindow.deviceData.deviceId = data.arrt.deviceId;
      this.bdmap.marker.infoWindow.deviceData.channel = data.arrt.channelId;
      this.bdmap.marker.infoWindow.deviceData.online = online;
      this.bdmap.marker.infoWindow.deviceData.lng = data.arrt.longitude;
      this.bdmap.marker.infoWindow.deviceData.lat = data.arrt.latitude;

      /** 点坐标 */
      this.bdmap.marker.point={lng:data.arrt.longitude,lat:data.arrt.latitude};
      /** 弹窗坐标 */
      this.bdmap.marker.infoWindow.point={lng:data.arrt.longitude,lat:data.arrt.latitude};
      this.bdmap.marker.infoWindow.title=data.title;

      this.bdmap.center.lng = data.arrt.longitude;
      this.bdmap.center.lat = data.arrt.latitude;

      //this.marker.infoWindow.contents = sContent;
      this.bdmap.marker.infoWindow.show=true;

      /** 在线就播放 */
      if ("1"==data.online){
        let deviceId=data.arrt.deviceId;
        let channelId=data.arrt.channelId;
        console.log("通知设备推流：" + deviceId + " : " + channelId);
        if (!(!!deviceId && !!channelId)){
          this.$Message.error("数据属性缺失，不能播放");
        }
        /** 通知设备推流 */
        this.api.playStart(deviceId,channelId).then(res=>{
          apiResult(res.data,false,result=>{
            this.$refs.jsPLayer1.play(result.data.ws_flv);
          })
        })
      }
    },


    infoWindowClose (e) {
      this.bdmap.marker.infoWindow.show = false
      if (!this.bdmap.marker.infoWindow.show){
        this.$refs.jsPLayer1.destroy();
      }
    },
    infoWindowOpen (e) {
      this.bdmap.marker.infoWindow.show = true
    },

/*    click(){
      console.log("AAAAAAAAAAAAAAAAAAAAAAA");
      this.drawerBottom.display=!this.drawerBottom.display;
      if (this.drawerBottom.display){
        this.btnBottom=this.drawerBottom.drawerHeight;
      }else{
        this.btnBottom='0px';
      }
    },*/
  },
  mounted() {
    this.drawerBottom.drawerWidth="50%";
    this.bdmap.center.lng = this.mapInfo.centerLongitude;
    this.bdmap.center.lat = this.mapInfo.centerLatitude;
  }
}
</script>
<style lang="less">
//@import "../../my-theme/template";

.main{
  position:relative;
  width: 100%;
  height: 100%;
}

.main-map{
  position: absolute;
  width: 100%;
  height: 100%;
  background-color:#c80000;
}
.foot_box{
  position: fixed;
  bottom:0;
  height: 32px;
  width: 576px;
  display: flex;
  justify-content: center;

  .close-btn1 {
    font-size: 14px;
    position: absolute;
/*    right: 20px;
    top: 50%;*/
    //transform: translateY(-50%);
    display: inline-block;
    cursor: pointer;
  }
}
.footer-button {
  display: flex;
  flex-flow: row;
  position: fixed;
  left: 20%;
  bottom: 0;
  padding: 0 30px;
  height: 50px;
  transform: translateX(-50%);
  background-color: rgba(25, 49, 122, 0.8);
  z-index: 2;
/*  ::before {
    left: -130px;
    border-right-color: rgba(25, 49, 122, 0.8) !important;
    border-right-width: 80px !important;
  };
  ::after {
    right: -130px;
    border-left-color: rgba(25, 49, 122, 0.8) !important;
    border-left-width: 80px !important;
  };*/
}

.foot_box::before {
  left: -130px;
  border-right-color: rgba(25, 49, 122, 0.8) !important;
  border-right-width: 80px !important;
}
.foot_box::after {
  right: -130px;
  border-left-color: rgba(25, 49, 122, 0.8) !important;
  border-left-width: 80px !important;
}

/*footer-menus*/
.footer-menus {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-flow: row;
  position: fixed;
  left: 50%;
  bottom: 0;
  padding: 0 30px;
  height: 30px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: rgba(25, 49, 122, 0.8);
  z-index: 2;
  cursor: pointer;
  color: #ffffff;
}
.footer-menus::before {
  left: -110px;
  border-right-color: rgba(25, 49, 122, 0.8) !important;
  border-right-width: 80px !important;
}
.footer-menus::after {
  right: -110px;
  border-left-color: rgba(25, 49, 122, 0.8) !important;
  border-left-width: 80px !important;
}
.footer-menus::before, .footer-menus::after {
  display: block;
  content: '';
  width: 0;
  height: 0;
  border: 30px solid transparent;
  position: absolute;
  bottom: -30px;
  pointer-events: none;
}
*:before, *:after {
  -webkit-box-sizing: border-box !important;
  box-sizing: border-box;
}
.footer-menus .footer-btn {
  margin: 0 16px;
  width: 60px;
  height: 70px;
  -webkit-transform: translateY(-30%);
  transform: translateY(-30%);
  cursor: pointer;
}
.footer-menus .footer-btn .footer-icon {
  margin: 0 auto;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  /*background-color: var(--themeColor);*/
  background-color: #2d8cf0;
  -webkit-box-shadow: 0 0 5px #0079ff inset;
  box-shadow: 0 0 5px #0079ff inset;
  border: 1px solid #0079ff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-menus .footer-btn span {
  display: inline-block;
  width: 100%;
  font-size: 12px;
  text-align: center;
  color: #fff;
  margin-top: 8px;
}

i.bi:not(.lsm-sidebar-more), a.bi:not(.lsm-sidebar-more), span.bi {
  color: var(--themeColor);
  cursor: pointer;
  font-size: 14px;
}

i.bi.bi-chevron-down {
  color: var(--buttonColor);
}

i.bi.bi-trash, i.bi.bi-person-check, i.fa.fa-flag-checkered, i.fa.fa-unlink, i.bi.bi-cloud-upload-fill {
  color: #ccc;
}

a.bi.bi-trash, a.bi.bi-person-check, a.fa.fa-flag-checkered, a.fa.fa-unlink, a.bi.bi-cloud-upload-fill {
  color: #ccc !important;
}


i.bi.bi-x-circle-fill, a.bi.bi-x-circle-fill {
  color: red;
}

.play-windows{
  height: 320px;
  width: 480px;
}
</style>
